<template>
    <div class="container">
        <div class="filter-item">
            <a-input class="filter-item__input" v-model:value="blurry" allow-clear :placeholder="t('yl.searchPlaceholder')" />
        </div>
        <div class="filter-item">
            <yl-seach-reset :loading="loading" @submit="handleSubmit" @reset="handleReset"></yl-seach-reset>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { useI18n } from 'vue-i18n';

import ylSeachReset from '@/components/ylSeachReset.vue';

export default defineComponent({
    name: 'dictFilter',
    components: {
        ylSeachReset,
    },
    props: {
        loading: {
            type: Boolean,
        },
    },
    emits: ['onSubmit', 'onReset'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const state = reactive({
            blurry: '',
        });
        const handleSubmit = () => {
            emit('onSubmit', state);
        };
        const handleReset = () => {
            emit('onReset');
        };
        return {
            ...toRefs(state),
            handleReset,
            handleSubmit,
            t,
        };
    },
});
</script>

<style lang="scss" scoped>
.container {
    @include flex;
    padding-bottom: $width10;
    .filter-item {
        @include flex;
        &__input {
            width: $width200;
        }
        & + .filter-item {
            margin-left: $width20;
        }
    }
}
</style>
